<template>
  <!-- 弹窗遮罩层 -->
  <view v-if="showCancelDialog" class="dialog-mask">
    <view class="dialog-container">
      <!-- 订单信息 -->
      <view class="dialog-header">
        <text class="order-no">订单编号：{{ currentOrder.orderNo }}</text>
        <text class="order-amount">实付：{{ currentOrder.amount }}元</text>
      </view>

      <!-- 提示文字 -->
      <view class="dialog-content">
        <text class="confirm-text">确定要取消该订单吗？</text>
      </view>

      <!-- 操作按钮 -->
      <view class="dialog-footer">
        <button 
          class="btn cancel-btn" 
          @click="handleDialogCancel"
        >取消</button>
        <button 
          class="btn confirm-btn" 
          @click="handleDialogConfirm"
        >确定</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const props = defineProps({
  // 当前操作的订单
  currentOrder: {
    type: Object,
    default: () => ({})
  }
});

const emit = defineEmits(['confirm']);

// 控制弹窗显示
const showCancelDialog = ref(false);

// 打开弹窗
const openDialog = () => {
  showCancelDialog.value = true;
};

// 关闭弹窗
const closeDialog = () => {
  showCancelDialog.value = false;
};

// 点击取消按钮
const handleDialogCancel = () => {
  closeDialog();
};

// 点击确认按钮
const handleDialogConfirm = () => {
  emit('confirm', props.currentOrder);
  closeDialog();
};

// 暴露方法给父组件
defineExpose({ openDialog });
</script>

<style scoped>
/* 遮罩层 */
.dialog-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

/* 弹窗容器 */
.dialog-container {
  width: 600rpx;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 32rpx;
}

/* 头部信息 */
.dialog-header {
  margin-bottom: 40rpx;
}

.order-no {
  display: block;
  font-size: 28rpx;
  color: #333;
}

.order-amount {
  display: block;
  margin-top: 16rpx;
  font-size: 26rpx;
  color: #666;
}

/* 内容区域 */
.confirm-text {
  font-size: 32rpx;
  color: #333;
  text-align: center;
  display: block;
  padding: 20rpx 0;
}

/* 底部按钮 */
.dialog-footer {
  margin-top: 40rpx;
  display: flex;
  justify-content: space-between;
}

.btn {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 40rpx;
  font-size: 30rpx;
  margin: 0 16rpx;
}

.cancel-btn {
  background-color: #f5f5f5;
  color: #666;
}

.confirm-btn {
  background-color: #007AFF;
  color: #fff;
}
</style>